<template>
  <div class="step_content">
    <div class="step_header">密码重置成功</div>
    <div>
      <a-button type="primary" class="button_center" @click="handleToHome">立即登录</a-button>
    </div>
    <div class="step_auto">{{ stepObj.time }}秒后返回登录页</div>
  </div>
</template>

<script>
export default {
  name: 'StepReset3',
  data() {
    return {
      stepObj: { time: 30 }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.countDown()
    })
  },
  methods: {
    countDown() {
      const { stepObj } = this
      const interval = window.setInterval(() => {
        if (stepObj.time-- <= 0) {
          stepObj.time = 30
          window.clearInterval(interval)
          this.handleToHome()
        }
      }, 1000)
    },
    handleToHome() {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../index.less';
.step_content {
  width: 420px;
  height: 288px;
  background-color: #feffff;
  box-shadow: 2px 1px 18px -2px #e0ecff;
  border-radius: 1px;
  text-align: center;
  .step_header {
    margin: 88px 112px 24px 112px;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;
  }
  .button_center {
    width: 88px;
    height: 36px;
    background-color: #33b0ed;
    border-radius: 2px;
    font-size: 14px;
    color: #ffffff;
  }
  .button_center:hover {
    cursor: pointer;
    color: @font-hover;
  }
  .step_auto {
    height: 12px;
    margin-top: 22px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 12px;
    letter-spacing: 0px;
    color: rgba(51, 51, 51, 0.8);
  }
}
</style>
